<input type="text" id="page" value="1" class="display-none">
<input type="text" id="bottomkg" value="open" class="display-none">

<div id="loadmore" class="bottom-load" style="display: none;">下滑加载更多信息</div>
<div id="loading" class="bottom-load" style="display: none;"></div>
<div id="bottomed" class="bottom-tip" style="display: none;">没有更多了</div>

<script type="text/javascript">
        //列表加载层的样式
        var listLoader = {
            lines : 10, // 花瓣数目
            length : 6, // 花瓣长度
            width : 6, // 花瓣宽度
            radius : 15, // 花瓣距中心半径
            corners : 1, // 花瓣圆滑度 (0-1)
            rotate : 0, // 花瓣旋转角度
            direction : 1, // 花瓣旋转方向 1: 顺时针, -1: 逆时针
            color : '#969696', // 花瓣颜色5882FA
            speed : 1, // 花瓣旋转速度
            trail : 60, // 花瓣旋转时的拖影(百分比)
            shadow : false, // 花瓣是否显示阴影
            hwaccel : false, //spinner 是否启用硬件加速及高速旋转            
            className : 'spinner', // spinner css 样式名称
            zIndex : 19700914, // spinner的z轴 (默认是2000000000)
            top : 'auto', // spinner 相对父容器Top定位 单位 px
            left : 'auto', // spinner 相对父容器Left定位 单位 px
            position : 'relative', // element position
            progress : true, // show progress tracker
            progressTop : 0, // offset top for progress tracker
            progressLeft : 0 // offset left for progress tracker
        };
        var listSpinner = new Spinner(listLoader);

        var timeoutScroll;
        window.onscroll = function() {
            setTimeout(function() {
                if (timeoutScroll != undefined) {
                    window.clearTimeout(timeoutScroll);
                }
                timeoutScroll = window.setTimeout(function() {
                    if (getScrollHeight() - 10 <= getDocumentTop() + getWindowHeight()) {
                        if (getValue('bottomkg') == 'open') {
                            queryKey('page');
                        }
                    }
                }, 105);
            }, 100);
        }

        function resetPageBar(flag) {
            if (flag == 'page') {
                setValue('page', parseInt(getValue('page')) + 1);
            }
            else {
                setValue('page', '1');
            }
        }

        function resetBottomStatus(flag, minCount = 0, oneList = null, allList = null) {
            if (flag == 'loading') {
                setValue('bottomkg', 'close');
                changeBottomTip('loading');
            }
            else {
                if (flag == 'bottomed') {
                    if (allList == null || allList.length <= 0) {
                        setHtml('bottomed', '没有符合条件的');
                    }
                    else {
                        setHtml('bottomed', '没有更多了');
                    }
                }
                
                minCount = parseInt(minCount);
                setValue('bottomkg', oneList.length > minCount ? 'open' : 'close');
                changeBottomTip(oneList.length > minCount ? 'loadmore' : 'bottomed');
            }
        }

        function changeBottomTip(flag) {
            if (flag == 'loadmore') {
                setDisplay('loadmore', '');
                setDisplay('loading', 'none');
                setDisplay('bottomed', 'none');
                listSpinner.spin();
            }
            else if (flag == 'loading') {
                setDisplay('loadmore', 'none');
                setDisplay('loading', '');
                setDisplay('bottomed', 'none');
                listSpinner.spin(getItem('loading'));
            }
            else {
                setDisplay('loadmore', 'none');
                setDisplay('loading', 'none');
                setDisplay('bottomed', '');
                listSpinner.spin();
            }
        }

        function getScrollHeight() {
            var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
            if (document.body) {
                bodyScrollHeight = document.body.scrollHeight;
            }
            if (document.documentElement) {
                documentScrollHeight = document.documentElement.scrollHeight;
            }
            scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
            return scrollHeight;
        }

        function getWindowHeight() {
            var windowHeight = 0;
            if (document.compatMode == "CSS1Compat") {
                windowHeight = document.documentElement.clientHeight;
            }
            else {
                windowHeight = document.body.clientHeight;
            }
            return windowHeight;
        }

        function getDocumentTop() {
            var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
            if (document.body) {
                bodyScrollTop = document.body.scrollTop;
            }
            if (document.documentElement) {
                documentScrollTop = document.documentElement.scrollTop;
            }
            scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
            return scrollTop;
        }
</script>

<style type="text/css">
        .bottom-load
        {
            height: 130px;
            line-height: 130px;
            color: #949494;
            font-size: 28px;
            text-align: center;
            background-color: #F2F2F2;
        }

        .bottom-tip
        {
            height: 130px;
            line-height: 130px;
            color: #949494;
            font-size: 28px;
            text-align: center;
            background-color: #F2F2F2;
        }
</style>